<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Goldfish's ChatRoom</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #18bc9c;
        }

        body {
            background-color: #f5f6fa;
            min-height: 100vh;
            padding: 2rem;
        }

        #root {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }

        h1 {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .table {
            margin: 2rem 0;
            border-radius: 10px;
            overflow: hidden;
        }

        .table thead {
            background-color: var(--primary-color);
            color: white;
        }

        .table td {
            vertical-align: middle;
        }

        fieldset {
            border: 2px solid #eee;
            border-radius: 10px;
            padding: 1.5rem;
            margin: 1.5rem 0;
        }

        legend {
            width: auto;
            padding: 0 1rem;
            font-size: 1.2rem;
            color: var(--primary-color);
            font-weight: 600;
        }

        #message_box {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid #ddd;
            border-radius: 8px;
            margin: 0.5rem 0;
            transition: border-color 0.3s;
        }

        #message_box:focus {
            border-color: var(--secondary-color);
            outline: none;
        }

        button[type="submit"] {
            background-color: var(--secondary-color);
            color: white;
            padding: 0.6rem 1.5rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        button[type="submit"]:hover {
            opacity: 0.9;
        }

        #auth {
            margin-top: 2rem;
            padding: 1.5rem;
            background-color: #f8f9fa;
            border-radius: 10px;
        }

        #enter_service {
            text-align: center;
            margin-top: 2rem;
        }

        #enter_service a {
            display: inline-block;
            margin: 0.5rem;
            padding: 0.8rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            text-decoration: none;
            border-radius: 6px;
            transition: transform 0.2s;
        }

        #enter_service a:hover {
            transform: translateY(-2px);
        }

        .summary {
            border-top: 2px solid #eee;
            padding-top: 2rem;
        }

        /* 自定义表格条纹 */
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(24, 188, 156, 0.05);
        }
    </style>
</head>
<body>
<div id="root" class="row-cols-1">
    <h1>🐠 Goldfish's ChatRoom</h1>
    <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th>Messages History</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="message : ${messages}">
            <td th:text="${message}"></td>
        </tr>
        </tbody>
    </table>

    <form action="/" method="post">
        <fieldset>
            <legend>✉️ Send Message</legend>
            <div class="mb-3">
                <label for="message_box" class="form-label">Message:</label>
                <input id="message_box" type="text" name="message" class="form-control">
            </div>
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary">Send Message</button>
            </div>
        </fieldset>
    </form>

    <div id="auth">
        <form action="/info" method="post">
            <fieldset>
                <legend>🔐 Network Management</legend>
                <div class="mb-3">
                    <label for="sms" class="form-label" th:text="${password_prompt}"></label>
                    <input id="sms" type="text" name="sms" class="form-control" th:value="${autofill}">
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <button type="submit" class="btn btn-success">Verify</button>
                    <a href="/verify" class="link-primary text-decoration-none">Get SMS Code</a>
                </div>
            </fieldset>
        </form>
    </div>

    <div id="enter_service" class="summary">
        <h2>🔑 Authorization Status</h2>
        <div class="d-flex justify-content-center gap-3">
            <a href="/info" class="btn btn-outline-primary">Enter Service</a>
            <a href="/?logout=true" class="btn btn-outline-danger">Logout</a>
        </div>
        <p class="mt-3 text-muted">Last updated: <span th:text="${#dates.format(new java.util.Date(), 'yyyy-MM-dd HH:mm')}"></span></p>
    </div>
</div>
</body>
</html>